<!-- src/components/ShoppingCart.vue -->
<template>
    <div class="shopping-cart">
      <h2>购物车</h2>
      <ul>
        <li v-for="item in cartItems" :key="item.name">
          {{ item.name }} - ¥{{ item.price }} - 数量：{{ item.quantity }}
          <button @click="incrementQuantity(item.name)">+</button>
          <button @click="decrementQuantity(item.name)">-</button>
        </li>
      </ul>
      <p>总价：¥{{ cartTotalPrice }}</p>
    </div>
  </template>
  
  <script>
  import { mapState, mapGetters, mapActions } from 'vuex';
  
  export default {
    computed: {
      ...mapState(['cartItems']),
      ...mapGetters(['cartTotalPrice'])
    },
    methods: {
      ...mapActions(['incrementQuantity', 'decrementQuantity'])
    }
  };
  </script>
  
  <style scoped>
  .shopping-cart {
    text-align: center;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    margin: 10px 0;
  }
  button {
    margin-left: 10px;
  }
  </style>